<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    /*
     Ajax : Asynchronous Javascript and Xml
      - HTTP : 동기 통신으로 인해 비용이 많이 발생
      - Ajax : 비동기 통기 > data의 부정합이 발생할 확률을 거의 없다.
             자바스크립트에서 XMLHttpRequest 객체를 이용해 통신
     * */
    var xhr = new XMLHttpRequest();
    window.addEventListener("load", function(){
        xhr.addEventListener("readystatechange", function(){
            if(xhr.status==200 && xhr.readyState==4){
                var data = xhr.responseText;
                console.log(data);
                document.querySelector("div").innerHTML = data;
            }
        });
        xhr.open("get", "a.txt");
        xhr.send();
    });
</script>
</head>
<body>
    <div></div>
</body>
</html>